React レスポンシブ

情報Input

hr.icon

そもそもレスポンシブって何なん...

「レスポンシブWebデザイン」とは、PC、タブレット、スマートフォンなど、異なる画面サイズの幅を基準にWebサイト表示を柔軟に調整し、見やすく最適な表示にすることを指します。

スマートフォンサイトを全く別のデータで用意し、表示するやり方もありますが、「レスポンシブWebデザイン」のメリットは１つのファイルでPC・タブレット・スマホなどすべての表示を行うことができることです。テキスト・画像などは共通のものを利用することになりますので、後々の更新や修正といった管理がしやすくなり、PCサイト、スマートフォンサイトで情報が異なるといったことは基本的にはありません。

ただ、そんなの保守性がめちゃ悪いから、レスポンシブにしよう的な話かなと。

デメリットとしては、PC・タブレット・スマートフォンといった画面サイズの違ったものすべてに同じ内容を表示させる必要があるため、各端末ごとに全く違うデザインや内容を掲載する場合には向いていません。

レスポンシブWebデザインとは、スマートフォン・タブレット・PCなど、異なる画面サイズの幅を基準にしてWebサイト表示を柔軟に調整し、見やすくすることを指します。

レスポンシブレイアウトとは、画面の幅に応じてCSSを切り替えるレイアウトのことです。

CSSの切り替えを行うピクセル数は「ブレイクポイント」と呼ばれ、このブレイクポイントの値を指定することで、ユーザーの使用デバイスに適した表示をすることができます。

でもそうだな、端末とかは関係なく、横幅に合わせてデザインを変える感じなんだな。

一方、viewportを設定しなければ、レスポンシブデザイン対応できません。

具体的には、モバイル（スマホ、タブレット）でコンテンツを閲覧したときに、PC向けサイトの横幅になるので表示領域が最適化されません。

この場合、文字が画像が小さくて見ずらかったり、見ずらいので都度ピンチアウトやピンチインで拡大縮小して閲覧する手間が増えます。

コーディングする際のブレイクポイントを整理

スマートフォン：設定なし（実質599px以下）

タブレット：600px

PC：1,025px

つまり、スマートフォン用、タブレット用、パソコン用、3つの見た目を作る必要があるということよな。

結論から言うと、2023年版の最適なブレイクポイントは600px・834pxです。

例えば、ブレークポイントを1024pxに設定する場合、9.7型iPadの縦横、大型のタブレットの縦向きまでが「タブレット」として対応する形となり、834pxに設定すれば、11型までのiPadおよびAndroidタブレットの縦向きを「タブレット」、横向き時は全て「デスクトップ」として調整する、という形での対応が想定されます。

このあたりの線引きの判断は、タブレットでの表示内容をスマートフォン寄りにするのか、デスクトップ寄りにするのかという、コンテンツベースでの観点も加味して判断すると良いでしょう。

デスクトップ寄りにするなら、タブレットのブレークポイント範囲を大きく取る的な

Reactでレスポンシブ実現する場合の...Tips

これ使えば以下のような感じで、レスポンシブのためのフラグ作れそう。

code: sample.js

...

isMobile = useMedia({ maxWidth: "599px" });

isTablet = useMedia({ minWidth: "600px", maxWidth: "1024px"});

isPC = useMedia({minWidth: "1025px"});

...

素直に画面サイズ毎、デバイス毎、あるいはインタラクション毎のReactコンポーネントを書けばいい

使いまわせる部品は、コンポーネントとして切り出して再利用する

無理に共通化して複雑化させる必要もないか。そこはいい塩梅で。